<template>
  <div>
    <div>
      <el-form-item label="姓名：">
        <el-input v-model="searchName" style="width: 200px" clearable/>
        <el-button type="primary" @click="selUserInfo();">搜索</el-button>
        <el-button type="success" @click="router.push('/index/addUserInfo')">添加</el-button>
      </el-form-item>
    </div>
    <div>
      <el-table :data="userInfoList" style="width: 100%">
        <el-table-column prop="userId" label="id" width="180"/>
        <el-table-column prop="userName" label="姓名" width="180"/>
        <el-table-column prop="password" label="密码"/>
        <el-table-column prop="roleInfo.roleName" label="角色"/>
        <el-table-column label="详情">
          <template #default="scope">
            <a href="#" @click="showDetailsDialog(scope.row)">详情</a>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" circle @click="openUpdDialog(scope.row)">改
            </el-button>
            <el-button type="danger" circle @click="delUserInfo(scope.row.userId)">删</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next"
                     v-model:page-size="pageSize"
                     v-model:current-page="currentPage"
                     v-model:page-count="pageCount"
                     @current-change="handleCurrentChange"/>
    </div>

  </div>
  <!--    用户详情框 -->
  <el-dialog v-model="dialogVisible" title="用户详情界面" width="600">
    <user-info-details :img-u-r-l="imgURL" :user-info-details="userInfoDetails"></user-info-details>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <!--    修改框 -->
  <el-dialog v-model="dialogUpdFormVisible" title="修改窗口" width="500">
    <el-form :model="userInfo">
      <div>
        <div class="add-field-div">
          <label class="add-field-div-label">用户登录名：</label>
          <el-input v-model="userInfo.userId" style="width: 240px" placeholder="Please input" disabled/>
        </div>
        <div class="add-field-div">
          <label class="add-field-div-label">密码：</label>
          <el-input v-model="userInfo.password" style="width: 240px" placeholder="Please input"/>
        </div>
        <div class="add-field-div">
          <label class="add-field-div-label">真实姓名：</label>
          <el-input v-model="userInfo.userName" style="width: 240px" placeholder="Please input"/>
        </div>
        <div class="add-field-div">
          <label class="add-field-div-label">所在部门：</label>
          <el-select v-model="userInfo.departId" placeholder="Select" style="width: 240px">
            <el-option
                v-for="item in departList"
                :key="item.departId"
                :label="item.departName"
                :value="item.departId"
            />
          </el-select>
        </div>
        <div class="add-field-div">
          <label class="add-field-div-label">性别：</label>
          <el-radio-group v-model="userInfo.gender">
            <el-radio value="1" size="large">男</el-radio>
            <el-radio value="2" size="large">女</el-radio>
          </el-radio-group>
        </div>
        <div class="add-field-div">
          <label class="add-field-div-label">头像：</label>
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" width="50px" height="50px" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="add-field-div">
          <label class="add-field-div-label">角色：</label>
          <el-select v-model="userInfo.roleId" placeholder="Select" style="width: 240px">
            <el-option
                v-for="item in roleList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
            />
          </el-select>
        </div>
        <div class="add-field-div">
          <label class="add-field-div-label">状态：</label>
          <el-select v-model="userInfo.userState" placeholder="Select" style="width: 240px">
            <el-option
                v-for="item in userStateList"
                :key="item.userStateId"
                :label="item.userStateName"
                :value="item.userStateId"
            />
          </el-select>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogUpdFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updUserInfo">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import api from "@/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {UserInfo, DepartInfo, UserState, RoleInfo, UserInfoDetailsTS} from "@/ts/personnel/UserInfo";
import UserInfoDetails from "@/components/personnelManagement/UserInfoDetails.vue";

onMounted(() => {
  selUserInfo();
  selDepartInfo();
  selRoleInfo();
  selUserState();
})

let searchName = ref("");
let pageCount = ref(0); // 总页数
let currentPage = ref(1); // 当前页数
let pageSize = ref(5); // 每页条数
// 当前页数据
let userInfoList = ref<UserInfo[]>([]);

// 查询用户信息
const selUserInfo = () => {
  api({
    method: "post", url: "/selUserInfo", params: {
      searchName: searchName.value,
      currentPage: currentPage.value,
      pageSize: pageSize.value
    }
  }).then(resp => {
    userInfoList.value = resp.data.list;
    pageCount.value = resp.data.pageTotal;
  });
}


// 处理当前页更改
const handleCurrentChange = (val) => {
  currentPage.value = val;
  selUserInfo();
}

// 删除
const delUserInfo = (userId: String) => {
  api({method: "post", url: "/delUserInfo", params: {userId: userId}}).then(resp => {
    if (resp.data.code == 1)
      selUserInfo();
    ElMessage(resp.data.message);
  });
}

// 用户详情
const dialogVisible = ref(false);
const userInfoDetails = ref<UserInfoDetailsTS>();
const imgURL = ref('');

const showDetailsDialog = (u) => {
  userInfoDetails.value = u;
  imgURL.value = `http://localhost:8080/download?name=${u.headImg}`;
  dialogVisible.value = true;
};

// --------------修改---------------
const dialogUpdFormVisible = ref(false);
const userInfo = ref<UserInfo>({});

const openUpdDialog = (u) => {
  u.gender += ""; // 类型不一致导致回显失败
  userInfo.value = u;
  imageUrl.value = `http://localhost:8080/download?name=${u.headImg}`;
  dialogUpdFormVisible.value = true;
};

const updUserInfo = () => {
  userInfo.value.departInfo = null, userInfo.value.roleInfo = null, userInfo.value.us = null;
  api({
    url: "/updUserInfo", method: "post", params: userInfo.value
  }).then(resp => {
    if (resp.data.code == 1) {
      selUserInfo();
      dialogUpdFormVisible.value = false;
    }
    ElMessage(resp.data.message);
  });
};

// 部门
const departList = ref<DepartInfo[]>([]);
const selDepartInfo = () => {
  api({
    url: "/departInfo", method: "get"
  }).then(resp => {
    departList.value = resp.data;
  });
};


// 角色
const roleList = ref<RoleInfo[]>([]);
const selRoleInfo = () => {
  api({
    url: "/selRoleInfo", method: "get"
  }).then(resp => {
    roleList.value = resp.data;
  });
};


// 状态
const userStateList = ref<UserState[]>([]);
const selUserState = () => {
  api({
    url: "/selUserState", method: "get"
  }).then(resp => {
    userStateList.value = resp.data;
  });
};


// 上传
let imageUrl = ref<string>('');

const handleAvatarSuccess = (resp: any) => {
  userInfo.value.headImg = resp;
  imageUrl.value = `http://localhost:8080/download?name=${resp}`
};

const beforeAvatarUpload = (file) => {
  /*
  const isPNG = file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isPNG) {
      this.$message.error('上传头像图片只能是 PNG 格式!');
  }
  if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 2MB!');
  }
   */
  return true;
}
</script>

<style scoped>


.add-field-div {
  padding: 5px;
}

.add-field-div-label {
  display: inline-block;
  width: 120px;
}

/*上传图片样式：*/
.avatar-uploader {
  display: inline;
}

.avatar-uploader .el-upload {
  border: dashed 2px #d8dde3 !important;
  border-radius: 4px !important;
  background: #fcfcfc;
}

.avatar-uploader .avatar-uploader-icon {
  background: #fcfcfc;
}

.avatar-uploader .el-icon-plus:before {
  content: "上传图片" !important;
  font-size: 16px;
  color: #000;
}
</style>